<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <!-- 解决ajax被spring security的CSRF拦截POST和PUT请求问题 -->
    <meta name="_csrf" th:content="${_csrf.token}">
    <meta name="_csrf_header" th:content="${_csrf.headerName}">
    <title>核酸检测结果</title>

    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            #un {
                color: var(--light);
                font-size: 1.1rem;
            }
        }

    </style>
    <!-- Custom styles for this template -->
    <link th:href="@{/css/dashboard.css}" rel="stylesheet">
    <link th:href="@{/css/toastr.min.css}" rel="stylesheet">
    <!--    <link rel="stylesheet" href="https://getbootstrap.com/assets/css/docs.min.css" />-->
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/css/base.css}" rel="stylesheet">
    <link th:href="@{/css/tempusdominus-bootstrap-4.css}" rel="stylesheet">


    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script th:src="@{/js/jquery.slim.min.js}"><\/script>')</script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/bootstrap.bundle.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/moment-with-locales.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/moment-timezone-with-data-2012-2022.min.js}"></script>
    <script th:src="@{/js/base.js}"></script>
    <script th:src="@{/js/tempusdominus-bootstrap-4.js}"></script>

    <script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.min.js"></script>
    <script th:src="@{/js/toastr.min.js}"></script>
    <script th:src="@{/js/user-info.js}"></script>
    <script th:src="@{/js/dashboard.js}"></script>

    <script type="text/javascript">
        window.onload = function () {
            app()
        }
    </script>

</head>
<body>
<div th:replace="~{common :: top-nav}"></div>

<div class="container-fluid">
    <div class="row">
        <!--左侧导航-->
        <div class="col-2">
            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <a class="nav-link" id="v-pills-admin-tab" role="tab" aria-selected="true" th:href="@{/login/main}" sec:authorize="hasAnyRole('ADMIN')">主页</a>
                <a class="nav-link" id="v-pills-home-tab" role="tab" aria-selected="false" th:href="@{/login/main}" sec:authorize="hasAnyRole('STUDENT','GUARD','MG','TESTER')">个人信息</a>
                <a class="nav-link" id="v-pills-messages-tab" role="tab" aria-selected="false" th:href="@{/access/accessInfo}" sec:authorize="hasAnyRole('GUARD','MG')">出入信息登记</a>
                <a class="nav-link" id="v-pills-tester-tab" role="tab" aria-selected="true" th:href="@{/studentHealth}" sec:authorize="hasRole('TESTER')">核酸检测信息登记</a>
                <a class="nav-link" id="v-pills-code-tab" role="tab" aria-selected="true" th:href="@{/health/heathCode}" sec:authorize="hasRole('TESTER')">健康码信息</a>
                <a class="nav-link" id="v-pills-settings-tab" role="tab" aria-selected="true" th:href="@{/access/allInformation}" sec:authorize="hasAnyRole('MG','ADMIN')">出入信息管理</a>
                <a class="nav-link active" id="v-pills-health-tab" role="tab" aria-selected="true" th:href="@{/detected/findAll}" sec:authorize="hasAnyRole('MG','ADMIN')">核酸检测信息</a>
                <a class="nav-link" id="v-pills-staff-tab" role="tab" aria-selected="true" th:href="@{/guard/arrangeStaff}" sec:authorize="hasAnyRole('MG')">人员安排</a>
                <a class="nav-link" id="v-pills-on-day-staff-tab" role="tab" aria-selected="true" th:href="@{/guard/onDayStaff}" sec:authorize="hasAnyRole('MG','ADMIN')">在班人员</a>
                <a class="nav-link" id="v-pills-add-student-tab" role="tab" aria-selected="true" th:href="@{/addStu}" sec:authorize="hasAnyRole('ADMIN')">添加学生</a>
                <a class="nav-link" id="v-pills-add-guard-tab" role="tab" aria-selected="true" th:href="@{/addSec}" sec:authorize="hasAnyRole('ADMIN')">添加工作人员</a>
                <a class="nav-link" id="v-pills-role-tab" role="tab" aria-selected="true" th:href="@{/adminPart/viewAll}" sec:authorize="hasAnyRole('ADMIN')">角色管理</a>
            </div>
        </div>

        <!-- 核酸检测信息管理 -->
        <div class="col-10 px-3 py-md-3">
            <div th:if="${nucleicAcidDetects == null}">
                <img th:src="@{/img/zwnr.png}" class="img-fluid rounded mx-auto d-block">
            </div>
            <div class="tab-pane fade show active" id="v-pills-settings" role="tabpanel" th:if="${nucleicAcidDetects != null}" sec:authorize="hasAnyRole('MG','ADMIN')">
                <label class="h4">可根据学号姓名或时间筛选</label>
                <hr class="mb-2">
                <!-- 学号和姓名查询 -->
                <form class="needs-validation px-5 py-md-2" th:action="@{/detected/findByStuId}" method="post" novalidate>
                    <div class="form-row">
                        <label for="stu-no" class="col-form-label col-form-label-sm">学号:</label>
                        <div class="col-md-5">
                            <input type="text" name="sno" id="stu-no" class="form-control" placeholder="学号" required>
                            <div class="invalid-feedback">
                                请填写正确学号!
                            </div>
                        </div>
                        <label for="stu-name" class="col-form-label col-form-label-sm">姓名:</label>
                        <div class="col-md-5">
                            <input type="text" name="sname" id="stu-name" class="form-control" placeholder="姓名" required>
                            <div class="invalid-feedback">
                                请填写对应姓名!
                            </div>
                        </div>
                        <div class="col">
                            <button type="submit" class="btn btn-primary mb-2">查询</button>
                        </div>
                    </div>
                    <input type="hidden" name="_csrf" th:value="${_csrf.token}" th:if="${_csrf}">
                </form>

                <!-- 时间查询 -->
                <div class="container">
                    <div class="row justify-content-center">
                        <div class='col-md-5'>
                            <div class="row form-group">
                                <label for="datetimepicker7" class="col-form-label col-form-label-sm">开始时间:</label>
                                <div class="col-md-10 input-group date" id="datetimepicker7"
                                     data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" id="start-time"/>
                                    <div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class='col-md-5'>
                            <div class="row form-group">
                                <label for="datetimepicker8" class="col-form-label col-form-label-sm">结束时间:</label>
                                <div class="col-md-10 input-group date" id="datetimepicker8" data-target-input="nearest">
                                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" id="end-time"/>
                                    <div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
                                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-">
                            <button type="button" onclick="getTime('','',1,20)" class="btn btn-primary mb-2">查询</button>
                        </div>
                    </div>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $('#datetimepicker7').datetimepicker();
                        $('#datetimepicker8').datetimepicker({
                            useCurrent: false
                        });
                        $("#datetimepicker7").on("change.datetimepicker", function (e) {
                            $('#datetimepicker8').datetimepicker('minDate', e.date);
                        });
                        $("#datetimepicker8").on("change.datetimepicker", function (e) {
                            $('#datetimepicker7').datetimepicker('maxDate', e.date);
                        });
                    });
                </script>

                <table class="table table-striped table-hover table-bordered">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">学号</th>
                        <th scope="col">姓名</th>
                        <th scope="col">检测结果</th>
                        <th scope="col">检测时间</th>
                        <th scope="col">检测地址</th>
                        <th scope="col">检测员工号</th>
                        <th scope="col">检测员姓名</th>
                    </tr>
                    </thead>
                    <tbody id="table_result">
                    <tr th:each="na,stat : ${nucleicAcidDetects}" th:class="${stat.odd}?'odd':'even'">
                        <th scope="row" th:text="${stat.count}"></th>
                        <td th:text="${na.healthCode.student.no}"></td>
                        <td th:text="${na.healthCode.student.username}"></td>
                        <td th:text="阴性" th:if="${na.result}"></td>
                        <td th:text="阳性" th:if="${!na.result}"></td>
                        <td th:text="${#dates.format(na.time,'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td th:text="${na.address}"></td>
                        <td th:text="${na.securityGuard.no}"></td>
                        <td th:text="${na.securityGuard.username}"></td>
                    </tr>
                    </tbody>
                </table>
                <div id="barcon" name="barcon"></div>
            </div>
        </div>
        <input type="hidden" id="waring-msg" th:value="${waring}">
    </div>
</div>

</body>
<script type="text/javascript">
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    $(document).ajaxSend(function (e, xhr, options) {
        xhr.setRequestHeader(header, token);
    })

    //获取参数 提示是否成功
    function msg() {
        toastr.options.positionClass = 'toast-top-center';
        var warMsg = $('#waring-msg').val();
        if (!isEmpty(warMsg)) {
            toastr.warning('' + warMsg, '提示')
        }
        return false
    }

    //调用方法
    function app() {
        msg()
        goPage(1, 20)
    }

    //分页
    function goPage(pno, psize) {
        var itable = document.getElementById("table_result");//通过ID找到表格
        var num = itable.rows.length;//表格所有行数(所有记录数)
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        //总共分几页
        if (num / pageSize > parseInt(num / pageSize)) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
        var endRow = currentPage * pageSize;//结束显示的行   10
        endRow = (endRow > num) ? num : endRow;
        //遍历显示数据实现分页
        for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            if (i >= startRow && i <= endRow) {
                irow.style.display = "table-row";
            } else {
                irow.style.display = "none";
            }
        }
        var tempStr = "";
        tempStr += "<div class='row justify-content-center py-md-3'>" +
            "<nav aria-label=\"AccessInfo For Student\">" +
            "<ul class=\"pagination\">"
        if (currentPage > 1) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>";

            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>"
            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onClick=\"goPage(" + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        }
        tempStr += "</ul>" +
            "</nav>" +
            "</div>"
        tempStr += "<div class='row justify-content-center'>当前第 " + pno + " 页 总计 " + totalPage + " 页 共 " + num + " 条记录</div>"
        document.getElementById("barcon").innerHTML = tempStr;
    }

    //根据时间进行筛选
    function getTime(stime, etime, pno, psize) {
        var itable = document.getElementById("table_result");//通过ID找到表格
        var num = itable.rows.length;//表格所有行数(所有记录数)
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        //获取时间
        var startTime = document.getElementById('start-time').value;
        var endTime = document.getElementById('end-time').value;
        if (stime === '' && etime === '') {//第一次筛选时将会进入此语句
            console.log(stime)
            if (startTime === '') {
                toastr.error('请选择开始时间！');
                return false;
            }
            if (endTime === '') {
                toastr.error('请选择结束时间！');
                return false;
            }
            stime = startTime;
            etime = endTime;
        }
        //将字符串转为时间
        var timeStart = new Date(stime);
        var timeEnd = new Date(etime);
        //将时间转为字符串，并指定格式  字符串再转为整型
        var timeStartInt = parseInt(timeStart.Format('yyyyMMddhhmm'))
        var timeEndInt = parseInt(timeEnd.Format('yyyyMMddhhmm'))

        var tableNum = 0; // 总行数
        for (var i = 1; i < (num + 1); i++) {
            var irow1 = itable.rows[i - 1];
            var cellTime1 = irow1.cells[4].innerHTML;
            var newCellTime1 = new Date(cellTime1).Format('yyyyMMddhhmm');
            if (timeEndInt > parseInt(newCellTime1) && parseInt(newCellTime1) > timeStartInt) {
                tableNum++;
            }
        }
        if (tableNum === 0) {
            for (var i = 1; i < (num + 1); i++) {
                itable.rows[i - 1].style.display = 'none';
            }
            document.getElementById("barcon").innerHTML = '';
            toastr.warning('这个时间段内没有任何核酸检测信息!');
            return false;
        }
        //总共分几页
        if (tableNum / pageSize > parseInt(tableNum / pageSize)) {
            totalPage = parseInt(tableNum / pageSize) + 1;
        } else {
            totalPage = parseInt(tableNum / pageSize);
        }
        var currentPage = pno;//当前页数
        var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  1
        var endRow = currentPage * pageSize;//结束显示的行   15
        endRow = (endRow > num) ? num : endRow;

        //进行分页
        for (var i = 1; i < (num + 1); i++) {
            var irow = itable.rows[i - 1];
            var cellTime = irow.cells[4].innerHTML;
            var newCellTime = new Date(cellTime).Format('yyyyMMddhhmm');
            if (timeEndInt > parseInt(newCellTime) && parseInt(newCellTime) > timeStartInt) {
                console.log('s')
                if (i >= startRow && i <= endRow) {
                    irow.style.display = 'table-row';
                } else {
                    irow.style.display = 'none';
                }
                // console.log(cellTime)
            } else {
                irow.style.display = 'none';
            }
        }
        var tempStr = "";
        tempStr += "<div class='row justify-content-center py-md-3'>" +
            "<nav aria-label=\"AccessInfo For Student\">" +
            "<ul class=\"pagination\">"
        if (currentPage > 1) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>";

            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage - 1) + "," + psize + ")\"><上一页&nbsp;</a>" +
                "</li>"
            var jhs = 1;
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li class=\"page-item\">" +
                    "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + j + "," + psize + ")\">" + j + "</a>" +
                    "</li>";
                jhs++;
                if (jhs > 6) {
                    tempStr += "<li class=\"page-item disabled\">" +
                        "<a class=\"page-link\" >...</a>" +
                        "</li>";
                    break;
                }
            }
        }
        if (currentPage < totalPage) {
            tempStr += "<li class=\"page-item\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        } else {
            tempStr += "<li class=\"page-item disabled\">" +
                "<a class=\"page-link\" href=\"#\" onclick=\"getTime(\'" + stime + "\',\'" + etime + "\'," + (currentPage + 1) + "," + psize + ")\">下一页>&nbsp;</a>" +
                "</li>";
            for (var j = 1; j <= totalPage; j++) {
            }
        }
        tempStr += "</ul>" +
            "</nav>" +
            "</div>"
        tempStr += "<div class='row justify-content-center'>当前第 " + pno + " 页 总计 " + totalPage + " 页 共 " + tableNum + " 条记录</div>"
        document.getElementById("barcon").innerHTML = tempStr;
    }

    //自定义转化函数
    Date.prototype.Format = function (fmt) {
        let o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (let k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

</script>
</html>